<template>
    <div class="loginPage">
        <div class="title">16路基带信号采集处理系统</div>
        <div class="usrname">用户名：
            <el-input v-model="usrname" placeholder="请输入用户名" style="width:300px;margin-left: 10px;"></el-input>
        </div>
        <div class="password">密&emsp;码：
            <el-input placeholder="请输入密码" v-model="password" style="width:300px;margin-left: 10px;" show-password></el-input>
        </div>
        <div class="enterBtn">
            <el-button @click="login()">登录</el-button>
        </div>
    </div>
</template>
<script>
export default {
    data() {
      return {
        usrname:'',
        password:'',
      };
    },
    mounted() {
        console.log("滿紙荒唐言，一把辛酸淚。都云作者癡，誰解其中味。")
    },
    methods: {
        login() {
            if (this.usrname == '') {
                this.$message.error("用户名不能为空！")
            } else if (this.password == '') {
                this.$message.error("请输入密码")
            } else {
                //sendLoginMsg()
                this.$message({
                    message: "登录成功！",
                    type:"success"
                })
            }
        }
    }
  };
</script>

<style scoped>
    .loginPage{
        background-image: url("../../assets/images/pageBg.png");
        width: 100%;
        height: 100vh;
    }
    .title{
        color: #fff;
        font-size: 36px;
        text-align: center;
        padding-top: 25vh;
    }
    .usrname{
        color: #fff;
        margin: 150px auto 50px -30px;
        text-align: center;
    }
    .password{
        color: #fff;
        margin: 50px auto 0 -30px;
        text-align: center;
    }
    .enterBtn{
        text-align: center;
        margin: 50px auto 0 30px;
    }
    .el-button{
        background-color: #193969 !important;
        color: #fff !important;
        border: 1px solid #75a5b9;
        width: 200px;
        border-radius: 15px;
    }
</style>